<template>
    <div class="app-contianer">
        <div class="app-content">
            <div class="logo-show"> <img src="@/assets/images/logo1.png" alt=""> </div>
            <div class="section-box">
                <div class="section-top">
                    <div class="section-title">忘记密码</div>
                    <div class="section-to-logo" @click="toLogin">前往登录</div>
                </div>
                <el-form ref="form" :model="formData" :rules="rules" size="large">
                    <el-form-item label="" class="item-input-box" prop="phone">
                        <el-input v-model="formData.phone" placeholder="请输入手机号">
                            <template #prepend>+86</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="" class="item-input-box2" prop="code">
                        <el-input v-model="formData.code" placeholder="请输入验证码">
                            <template #prepend>验证码</template>
                            <template #append>
                                <div :class="['to-get-code', downTime < 60 && 'to-get-code-disabled']"
                                    @click="toGetSmsCode">{{ downTime < 60 ? `${downTime}秒` : '获取验证码' }}</div>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="" class="item-input-box" prop="accountPassword">
                        <el-input v-model="formData.accountPassword" type="password" show-password placeholder="请输入密码">
                            <template #prepend>新的密码</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="" class="item-input-box" prop="resetPassword">
                        <el-input v-model="formData.resetPassword" type="password" show-password placeholder="请输入重复密码">
                            <template #prepend>重复密码</template>
                        </el-input>
                    </el-form-item>
                </el-form>

                <div class="flex-center register-btn">
                    <el-button type="primary" @click="submitForm" style="width: 296px" size="large">确定</el-button>
                </div>
            </div>
        </div>

        <div class="bg1"></div>
        <div class="bg2"></div>
        <div class="bg3"></div>
    </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { forgetPassword, sendSms } from '@/api/login'

const router = useRouter()

const resetPwdValidate = (rule, value, callback) => {
    if (value !== formData.value.accountPassword) {
        callback(new Error('两次密码输入不一致!'))
    } else {
        callback()
    }
}

const form = ref(null)
const formData = ref({
    phone: '',
    code: '',
    accountPassword: '',
    resetPassword: '',
})
const userTypeList = ref([])
const rules = ref({
    phone: [
        { required: true, message: '请输入手机号', trigger: 'blur' },
        { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
    ],
    code: [
        { required: true, message: '请输入验证码', trigger: 'blur' }
    ],
    accountPassword: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
    ],
    resetPassword: [
        { required: true, message: '请输入重复密码', trigger: 'blur' },
        { min: 6, message: '密码长度不能小于6位', trigger: 'blur' },
        { validator: resetPwdValidate, trigger: 'blur' }
    ],
})
const downTime = ref(60)

const getUserType = async () => {
    const res = await getMemberType('source_platform')
    if (res) {
        userTypeList.value = res.data
    }
}

const toGetSmsCode = async () => {

    let phoneReg = /^1[3-9]\d{9}$/
    if (!formData.value.phone) {
        ElMessage.error('请输入手机号')
        return
    }

    if (!phoneReg.test(formData.value.phone)) {
        ElMessage.error('手机号格式不正确')
        return
    }

    if (downTime.value < 60) {
        return
    }

    const res = await sendSms({ phone: formData.value.phone })
    if (res) {
        countDown()
    }
}

const countDown = () => {
    if (downTime.value > 0) {
        downTime.value -= 1
        setTimeout(() => {
            countDown()
        }, 1000)
    } else {
        downTime.value = 60
    }
}

const submitForm = () => {

    form.value.validate((valid) => {
        if (valid) {
            console.log('submit', formData.value)
            let parmas = JSON.parse(JSON.stringify(formData.value))
            delete parmas.resetPassword
            forgetPassword(parmas).then(res => {
                if (res) {
                    ElMessage.success('修改密码成功')
                    router.push('/login')
                }
            })
        } else {
            console.log('error submit')
        }
    })
}

const toLogin = () => {
    router.push('/login')
}
</script>

<style lang="scss" scoped>
.app-contianer {
    width: 100vw;
    height: 100vh;
    background-color: #F0F3F7;
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-content {
    background-color: #fff;
    width: 1280px;
    height: 700px;
    margin: 0 auto;
    padding: 32px 0 0;
    position: relative;
    z-index: 10;
    border-radius: 10px;
    box-shadow: 0px 10px 30px 10px rgba(51, 133, 255, 0.1);

    .logo-show {
        position: absolute;
        top: 32px;
        left: 40px;
        width: 134px;
        height: 46px;
    }

    .section-box {
        width: 585px;
        height: 100%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .section-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 44px;

        .section-title {
            font-size: 20px;
            font-weight: bold;
            color: #050B20;
        }

        .section-to-logo {
            display: flex;
            align-items: center;
            font-size: 14px;
            color: #666;
            cursor: pointer;

            &::after {
                content: "";
                display: block;
                width: 8px;
                height: 8px;
                border: 1px solid rgba(102, 102, 102, 1);
                border-left-color: transparent;
                border-bottom-color: transparent;
                transform: rotate(45deg);
                margin-left: 2px;
            }
        }
    }

    .more-info {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 20px;
        color: rgba(5, 11, 32, 1);
    }

    .register-btn {
        margin-top: 44px;
        position: relative;
        z-index: 100;
    }

    .to-get-code {
        width: 120px;
        text-align: center;
        color: #fff;
        font-size: 16px;
        font-weight: 500;
        line-height: 40px;
        background: rgb(51, 133, 255);
        border-radius: 0 30px 30px 0;
    }

    .to-get-code-disabled {
        background: #ccc;
        cursor: not-allowed;
    }
}

::v-deep .el-input-group__prepend {
    width: 120px;
    font-size: 16px;
    font-weight: 600;
    color: rgba(5, 11, 32, 1);
    border-radius: 30px 0 0 30px;
}

::v-deep .el-input-group__append {
    border-radius: 0 30px 30px 0;
    // background: rgba(51, 133, 255, 1);
    cursor: pointer;
    padding: 0;
}

.item-input-box {
    margin-bottom: 16px;

    &::v-deep .el-input__wrapper {
        border-radius: 0 30px 30px 0;
    }
}

.self-form-box {
    display: flex;
    align-items: center;
    width: 100%;

    .self-form-label {
        width: 120px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        box-shadow: 1px 0 0 0 #dcdfe6 inset, 0 1px 0 0 #dcdfe6 inset, 0 -1px 0 0 #dcdfe6 inset;
        font-size: 16px;
        font-weight: 600;
        color: rgba(5, 11, 32, 1);
        border-radius: 30px 0 0 30px;
        background-color: var(--el-fill-color-light);
    }

    .self-form-select {
        flex: 1;

        &::v-deep .el-select__wrapper {
            border-radius: 0 30px 30px 0;
        }
    }
}

.bg1 {
    position: fixed;
    bottom: 0;
    left: calc((100vw - 2127px)/2);
    width: 2127px;
    height: 255px;
    background-image: url(@/assets/images/bg1.png);
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 20;
    pointer-events: none;
}

.bg2 {
    position: fixed;
    bottom: 0;
    left: -15%;
    width: 150%;
    height: 223px;
    background-image: url(@/assets/images/bg2.png);
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 25;
    pointer-events: none;
}

.bg3 {
    position: fixed;
    bottom: 0;
    left: calc((100vw - 2159px)/2);
    width: 2159px;
    height: 334px;
    background-image: url(@/assets/images/bg3.png);
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 5;
    pointer-events: none;
}
</style>
